<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>生成条件</span>
        <el-button
            :loading="generationLoading"
            size="small"
            style="float:right"
            type="primary"
            @click="handleGeneration()">
          生成
        </el-button>
        <el-button
            :loading="generationLoading"
            size="small"
            style="float:right;margin-right: 15px"
            @click="handleResetGeneration()">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form ref="myForm" :model="listQuery" :rules="formRule" label-width="auto" size="small">
          <el-form-item label="模板：" prop="template">
            <el-select v-model="listQuery.template" filterable placeholder="请选择模板" style="width: 100%" @change="forceUpdate">
              <el-option
                  v-for="item in templateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="包名：" prop="packageName">
            <el-input v-model="listQuery.packageName" clearable></el-input>
          </el-form-item>
          <el-form-item label="建表语句：" prop="sql">
            <el-input v-model="listQuery.sql" :autosize="{ minRows: 10, maxRows: 30}" clearable
                      type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>


    <el-dialog :visible.sync="codeDialogVisible"
               title="代码"
               width="80%">
      <el-tabs :value="'0'">
        <el-tab-pane v-for="(item,index) in genCode" :key="index" :label="item.name" :name="index+''">
          <div>
            <ace-editor
                :lang="item.type"
                :options="options"
                :value="item.code"
                height="500px"
                theme="monokai"
                width="100%"
                @init="initEditor"
            ></ace-editor>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>

import {toolsPostRequire} from '@/api/tools'
import AceEditor from 'vue2-ace-editor';
import {templateConfigPostRequire} from "@/api/templateConfig";

const defaultListQuery = {
  sql: undefined,
  template: undefined,
  packageName: "com.aicode",
}

export default {
  components: {
    AceEditor
  },
  name: 'codePreviewView',
  data() {
    return {
      templateOptions: [],
      options: {
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        showPrintMargin: true,
        fontSize: "16px"
      },
      codeDialogVisible: false,
      genCode: [],
      generationLoading: false,
      listQuery: this.$deepClone(defaultListQuery),
      formRule: {
        sql: [{required: true, message: "请输入建表语句", trigger: 'blur'}],
      },
    }
  },
  mounted() {
    this.getAllTemplate()
    if (this.$store.getters.currentTemplate) {
      this.listQuery.template = this.$store.getters.currentTemplate.templateName;
    }
  },
  methods: {
    forceUpdate() {
      this.$forceUpdate()
    },
    getAllTemplate() {
      templateConfigPostRequire('getAllTemplate').then(response => {
        let templateList = response.data
        let templateOptions = []
        for (let i = 0; i < templateList.length; i++) {
          let template = templateList[i]
          templateOptions.push({
            value: template.templateName,
            label: template.templateName
          })
        }
        this.templateOptions = templateOptions
      })
    },
    initEditor(editor) {
      require('brace/ext/language_tools')
      // 设置语言
      require('brace/mode/html')
      require('brace/mode/javascript')    //language
      require('brace/mode/less')
      require('brace/mode/xml')

      require('brace/mode/java')
      require('brace/snippets/java')
      // 设置主题 按需加载
      require('brace/theme/monokai')
    },
    handleResetGeneration() {
      this.listQuery = this.$deepClone(defaultListQuery)
    },
    handleGeneration() {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          this.genCode = []
          this.generationLoading = true
          toolsPostRequire('codePreview', this.listQuery).then(response => {
            if (response) {
              this.$message({
                message: response.message,
                type: response.status ? 'success' : 'error'
              })
              if (response.status) {
                this.genCode = response.data
                this.codeDialogVisible = true
              }
            }
          }).finally(() => {
            this.generationLoading = false
          })
        }
      })
    },
  }
}
</script>
<style></style>
